<template>
  <svg-icon
    :icon-class="isFullscreen ? 'exit-fullscreen' : 'screenfull'"
    @click="toggleFullScreen"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const isFullscreen = ref(false)
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
      isFullscreen.value = false
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
